<template>
	<view class="activity">
		<!-- <me-tabs ref="meTabs" class="dataBar" :tabWidth="150" active-color="#FFF" v-model="platformIndex" :tabs="platformList" :nameKey="'abbreviation'" @change="catChange"></me-tabs> -->
		<u-tabs :current="platformIndex" font-size="28" active-color="#39ACFF" bar-width="100" :list="platformList" name="abbreviation"  @change="catChange"></u-tabs>
		<view class="search bgw">
			<u-search shape="square" 
			:action-style="{color:'#39ACFF'}"
			@custom="reload"
			@search="reload"
			@clear="clear"
			placeholder="请输入政策名称"
			v-model="title"></u-search>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="170" bottom="0" @down="downCallback" :up="upOption" :down="downOption" @up="upCallback">
			<view  class="materialList" @click="getDetail(item)"  v-for="(item,index) in list" :key="index">
				<view class="head">
					<image class="image"  :src="item.cover" alt="" v-if='item.cover' />
					<image class="image"  src="/static/logo.png" v-else  alt="" />
					<view class="msg s-flex-c-b-s">
						<view class="s-flex-c-s-s">
							<view class="title">{{item.title}}</view>
							<view class="sub">{{item.productName}}</view>
						</view>
						<view class="time">{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import myTab from "@/components/myTab/myTab"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		name:"bank",
		mixins: [MescrollMixin],
		components: {
			myTab
		},
		data() {
			return {
				title: '',
				index: 0,
				type: 1,
				platformIndex:0,
				platformList:[],
				platformId:'',
				list:[],
				shareImage:'',
				content:'',
				upOption:{
					auto:false
				},
				downOption:{
					auto:false
				}
			}
		},
		onLoad() {
			this.getProductList()
		},
		methods: {
			clear(){
				this.reload()
			},
			getDetail(e) {
				uni.navigateTo({
					url: '/pages/product/productDetail?id=' + e.productId + '&name=' + e.productName
				})
			},
			reload() {
				this.list = []
				this.mescroll.resetUpScroll()
			},
			//获取平台
			getProductList(){
				this.httpClient.post('stock/platform/getOaPlatformList').then(res=>{
					this.platformList =res
						console.log('this.platformList: ', this.platformList)
						this.platformIndex =0
						this.platformId=res[0].id
						this.list = []
						this.mescroll.resetUpScroll()
				})
			},
			//平台切换
			catChange(e){
				console.log('e: ', e)
				this.platformIndex=e
				this.platformId=this.platformList[e].id
				this.list = []
				this.mescroll.resetUpScroll()
			},
			//list
			upCallback(page) {
				this.httpClient.post('stock/app/bankActivity/list', {
					pageNum:page.num,
					pageSize:page.size,
					platformId:this.platformId,
					title:this.title,
				}).then(res => {
					this.mescroll.endByPage(res.rows.length, res.total)
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res.rows);
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			//预览图片
			previewImg(imgUrl) {
				uni.previewImage({
					urls: [imgUrl ]
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.activity{
		.search{
			padding: 10rpx 20rpx;
		}
		.materialList{
			background: #fff;
			margin-bottom: 15rpx;
			.head{
				padding: 20rpx;
				display: flex;
				align-items: center;
				.image{
					width: 176rpx;
					height: 176rpx;
					margin-right: 20rpx;
				}
				.title{
					color: #101010;
					font-size: 24rpx;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}
				.sub{
					color: #909090;
					font-size: 24rpx;
					line-height: 36rpx;
				}
				.msg{
					height: 176rpx;
				}
				.time{
					font-size:22rpx;
					color: #101010;
				}
			}
			.content{
				margin:10rpx 0;
			}
			.shareImg{
				width:100%;
				image{
					width: 40%;
					margin-right: 3%;
				}
				.imgw{
					width: 86% !important;
				}
			}
			.operation{
				margin-top:15rpx;
				text-align: right;
				text{
					border: 1px solid #eee;
					display: inline-block;
					padding: 0.3rem 1rem;
					font-size: 0.8rem;
					color: #fff;
					background: #3aacff;
					border-radius: 20px;
					margin-right: 0.4rem;
				}
			}
		}
		.shareBox{
			padding:30rpx;
			.shareDiv{
				width:100rpx;height:150rpx;display:inline-block;margin:20rpx;font-size:26rpx;text-align: center;
				image{
					width:100rpx;height:100rpx;
				}
			}
		}
	}
</style>
